<template>
  <div class="setwrap">
    <div class="titlecommon">农事计划</div>
    <div class="panelben">
      <div class="titlecommon2">
        <span> 农事计划审核 </span>
      </div>
      <!-- <div class="tab">
        <div
          @click="activeIndex = index"
          :class="[activeIndex == index ? 'tabchildActive' : '', 'tabchild']"
          v-for="(item, index) in menu"
          :key="index"
        >
          {{ item }}
        </div>
      </div> -->
      <div class="btntwo mt-3">
        <div class="btn btn-success mr-2" @click="addOne">
          <span class="text"> 审核通过 </span>
        </div>
        <div class="btn btn-delete mr-2" @click="addMoreHandle">
          <span class="text"> 审核不通过 </span>
        </div>
      </div>
      <div class="chooseDiy">
        <div class="left">
          <div class="one">
            <span>制定时间:</span>
            <el-select v-model="searchForm.value.farmResourceCategoryId" class="m-2" @change="categoryChange"
              placeholder="按农资类型筛选" size="large">
              <el-option v-for="(item) in searchOptions" :key="item.id" :label="item.categoryName"
                :value="item.id" />
            </el-select>
          </div>
          <div class="one">
            <span>所属地块:</span>
            <el-select v-model="searchForm.value.farmResourceCategoryId" class="m-2" @change="categoryChange"
              placeholder="按所属地块筛选" size="large">
              <el-option v-for="(item) in searchOptions" :key="item.id" :label="item.categoryName"
                :value="item.id" />
            </el-select>
          </div>
          <div class="one">
            <span>当前状态:</span>
            <el-select v-model="searchForm.value.farmResourceId" class="m-2" placeholder="按当前状态筛选" size="large">
              <el-option v-for="(item) in searchOptions" :key="item.id" :label="item.categoryName"
                :value="item.id" />
            </el-select>
          </div>
          <div class="one">
            <span>作物类型:</span>
            <el-select v-model="searchForm.value.farmResourceId" class="m-2" placeholder="按作物类型筛选" size="large">
              <el-option v-for="item in searchOptions" :key="item.id" :label="item.farmResourceName"
                :value="item.id" />
            </el-select>
          </div>
          <div class="one">
            <span>作物品种:</span>
            <el-select v-model="searchForm.value.farmResourceId" class="m-2" placeholder="按作物品种筛选" size="large">
              <el-option v-for="item in searchOptions" :key="item.id" :label="item.farmResourceName"
                :value="item.id" />
            </el-select>
          </div>
        </div>
        <div class="right">
          <div class="btn3 btn7" @click="searchHandle()">
            <el-icon style="vertical-align: middle">
              <Search />
            </el-icon>
            查询
          </div>
          <div class="btn3 btn7 btn4" @click="reSet()">
            <el-icon>
              <Refresh />
            </el-icon>
            重置
          </div>
        </div>
      </div>

      <div class="table">
        <el-table :data="tableData.value" style="width: 100%">
          <el-table-column label="序号" width="60">
            <template #default="scope">
              <div>
                {{(pageInfo.pageNum-1)*pageInfo.pageSize+(scope.$index + 1)}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="year" label="所属年度" />
          <el-table-column prop="plan" label="农事计划" />
          <el-table-column prop="plot" label="所属地块" />
          <el-table-column prop="crop" label="作物类型" />
          <el-table-column prop="variety" label="作物品种" />
          <el-table-column prop="setDate" label="制定日期" />
          <el-table-column prop="developer" label="制定人员" />
          <el-table-column prop="auditDate" label="审核日期" align="center">
            <template #default="scope">
              <div>
                {{scope.row.auditDate?scope.row.auditDate:'一 一'}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="auditer" label="审核人员" align="center">
            <template #default="scope">
              <div>
                {{scope.row.auditer?scope.row.auditer:'一 一'}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="当前状态">
            <template #default="scope">
              <div>
                {{getStatus(scope.row.status)}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <div class="btnwrap">
                <div v-if="scope.row.status == 1" class="success pointer mr-2 ">审核</div>
                <div v-if="scope.row.status != 1" class="btntext mr-2">查看</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="fy">
        <div class="total flexcenter">共 <span>{{ total }}</span>项数据</div>
        <el-pagination background layout="prev, pager, next" :total="total" :currentPage="pageInfo.pageNum"
          @current-change="currentChange" />
      </div>
    </div>
    <!-- <add v-if="addFlag" @getList="getList" ref="add"/>
    <add-more v-if="addMoreFlag" @refreshList="getListTwo" ref="addMore" :type="type" /> -->
  </div>
</template>

<script lang="ts">
import bus from '@/utils/bus'
import { defineComponent, ref, reactive, onMounted, onUnmounted } from "vue";
// import add from "./add.vue";
import { get, deletePost } from "@/public/request/api";
import { ElMessageBox, ElMessage } from "element-plus";
// import addMore from "../plantingType/modal/addMore.vue";
import storage from "@/store";
export default defineComponent({
  components: {
    // add,
    // addMore,
  },
  setup() {
    //变量
    const userRole = storage.state.userRole;
    let addFlag = ref(false)
    let addMoreFlag = ref(false)
    let type = ref('')
    let total = ref(6)
    let total2 = ref(0)
    let getCostTotal = ref(0)
    let activeIndex = ref(0);
    let searchForm = reactive({
      value: {
        farmResourceId: "",
        farmResourceCategoryId: "",
      },
    });
    let searchForm2 = reactive({
      value: {
        plotId: "",
        farmResourceId: "",
        dateTime: "",
        farmResourceCategoryId: '',
        beginDateTime: '',
        endDateTime: '',
        baseId: '',
      },
    });
    const menu = ["农资信息", "农资使用记录"];
    let plotOptionList = reactive({
      value: [],
    });
    let farmResourceOptionList = reactive({
      value: [],
    });
    let farmResourceNameOptionList = reactive({
      value: []
    })
    let farmResourceNameOptionList2 = reactive({
      value: []
    })
    let searchOptions = ref([])
    let pageInfo = reactive({
      pageSize: 10,
      pageNum: 1,
    });
    let pageInfo2 = reactive({
      pageSize: 10,
      pageNum: 1,
    });
    const date = ref("");
    const value = ref("");
    const options = [
      {
        value: "1",
        label: "地块01",
      },
    ];
    const tableData = reactive({
      value: [
        {
          year:2023,
          plan:'农事计划名称2',
          plot:'地块名称2',
          crop:'玉米',
          variety:'鲜玉1873',
          setDate:'2023-08-14',
          developer:'农艺师',
          auditDate:'',
          auditer:'',
          status:1,
        },
        {
          year:2023,
          plan:'农事计划名称3',
          plot:'地块名称3',
          crop:'玉米',
          variety:'鲜玉1873',
          setDate:'2023-08-14',
          developer:'农艺师',
          auditDate:'2023-08-14',
          auditer:'总经理',
          status:2,
        },
        {
          year:2023,
          plan:'农事计划名称4',
          plot:'地块名称4',
          crop:'玉米',
          variety:'鲜玉1873',
          setDate:'2023-08-14',
          developer:'农艺师',
          auditDate:'2023-08-14',
          auditer:'总经理',
          status:3,
        },
        {
          year:2023,
          plan:'农事计划名称5',
          plot:'地块名称5',
          crop:'玉米',
          variety:'鲜玉1873',
          setDate:'2023-08-14',
          developer:'农艺师',
          auditDate:'2023-08-14',
          auditer:'总经理',
          status:3,
        },
        {
          year:2023,
          plan:'农事计划名称6',
          plot:'地块名称6',
          crop:'玉米',
          variety:'鲜玉1873',
          setDate:'2023-08-14',
          developer:'农艺师',
          auditDate:'2023-08-14',
          auditer:'总经理',
          status:3,
        },
      ],
    });
    const tableData2 = reactive({
      value: [
        {
          name: "2023-06-01",
          jd: "种子",
          wd: "玉米富尔116",
          lwmc: "地块1",
          man: "张三",
          price: "￥10",
          num: "20",
          totalprice: "￥200",
        },
        {
          name: "2023-06-01",
          jd: "种子",
          wd: "玉米富尔116",
          lwmc: "地块1",
          man: "张三",
          price: "￥10",
          num: "20",
          totalprice: "￥200",
        },
        {
          name: "2023-06-02",
          jd: "化肥",
          wd: "金坷垃",
          lwmc: "地块1",
          man: "张三",
          price: "￥120",
          num: "10",
          totalprice: "￥1200",
        },
        {
          name: "2023-06-02",
          jd: "化肥",
          wd: "金坷垃",
          lwmc: "地块1",
          man: "张三",
          price: "￥120",
          num: "10",
          totalprice: "￥1200",
        },
      ],
    });

    // 生命周期
    onMounted(() => {
      mapInit()
    });
    bus.on('changeBase', mapInit);
    function mapInit() {
      console.log('切换基地了！！')
      getList();
      getPlotOptionsList();
      getfarmResourceOptionsList();
      getInfoList()
    }
    onUnmounted(() => {
      //
    });

    //methods

    function getfarmResourceOptionsList() {
      get("/farmResource/category/options", {}).then((res) => {
        farmResourceOptionList.value = res.data;
        //searchForm.value.farmResourceId=res.data[0]['id']
      });
    }
    function getPlotOptionsList() {
      get("/plot/options", {
        isExclude: 1
      }).then((res) => {
        plotOptionList.value = res.data;
        //searchForm.value.plotId=res.data[0]['id']
      });
    }
    function addOne() {
      addFlag.value = true
      setTimeout(() => {
        this.$refs.add.dialogVisible = true;
        this.$refs.add.editFlag = false;
      }, 150);
    }

    function openEdit(row) {
      addFlag.value = true
      setTimeout(() => {
        this.$refs.add.dialogVisible = true;
        this.$refs.add.editFlag = true;
        this.$refs.add.init(row)
      }, 150);

    }
    function addMoreHandle() {
      addMoreFlag.value = true
      if (activeIndex.value == 0) {
        type.value = 'farmSourceType'
      }
      setTimeout(() => {
        console.log('type.value', type.value);

        this.$refs.addMore.dialogVisible = true;
      }, 150);
    }
    function getInfoList() {
      get('/farmResource/usageRecord', {
        pageNum: pageInfo2.pageNum,
        pageSize: pageInfo2.pageSize,
        plotId: searchForm2.value.plotId,
        farResourceId: searchForm2.value.farmResourceId,
        farmResourceCategoryId: searchForm2.value.farmResourceCategoryId,
        beginDateTime: searchForm2.value.beginDateTime,
        endDateTime: searchForm2.value.endDateTime,
        baseId: 1

      }).then(res => {
        tableData2.value = res.pageInfo.list
        total2.value = res.pageInfo.total
        getCostTotal.value = res.pageInfo.navigatePages
      })
    }
    function getList() {
      get("/farmResource/page", {
        pageNum: pageInfo.pageNum,
        pageSize: pageInfo.pageSize,
        farmResourceId: searchForm.value.farmResourceId,
        farmResourceCategoryId: searchForm.value.farmResourceCategoryId,
        //dateTime:searchForm.value.dateTime,
      }).then((res) => {
        console.log(res);
        
        // tableData.value = res.pageInfo.list
        // total.value = res.pageInfo.total
      });
    }

    function searchHandle() {
      if (activeIndex.value == 0) {
        getList()
      } else {
        getInfoList()
      }
    }
    function currentChange(e) {
      pageInfo.pageNum = e
      getList()
    }
    function currentChange2(e) {
      pageInfo2.pageNum = e
      getInfoList()
    }
    function categoryChange2(e) {
      getNameByCateGory2(e)
      searchForm2.value.farmResourceId = ''
    }
    function categoryChange(e) {
      getNameByCateGory(e)
      searchForm.value.farmResourceId = ''
    }
    function getNameByCateGory2(e) {

      get("/farmResource/options", {
        farmResourceCategoryId: e
      }).then((res) => {
        farmResourceNameOptionList2.value = res.data
      });
    }
    function getNameByCateGory(e) {

      get("/farmResource/options", {
        farmResourceCategoryId: e
      }).then((res) => {
        farmResourceNameOptionList.value = res.data
      });
    }
    function delHandel(id) {
      deletePost("/farmResource/del", {
        id
      }).then((res) => {
        
        
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        getList()
      });

    }
    function delOne(row) {
      ElMessageBox.confirm("确认删除?")
        .then(() => {
          console.log(row)
          delHandel(row.id)

        })
        .catch(() => {
          // catch error
        });
    }
    function reSet() {
      if (activeIndex.value == 0) {
        searchForm.value = {
          farmResourceId: "",
          farmResourceCategoryId: "",
        }
        getList()
      } else {
        searchForm2.value = {
          plotId: "",
          farmResourceId: "",
          dateTime: "",
          farmResourceCategoryId: '',
          beginDateTime: '',
          endDateTime: '',
          baseId: '',
        }
        getInfoList()
      }
    }
    function getListTwo() {
      if (activeIndex.value == 0) {
        getList()
      } else {
        getInfoList()
      }
    }

    const getStatus = (val) =>{
      let text = ''
      switch(val){
        case 0 :
          text = '待提交';
          break;
        case 1 :
          text = '待审核';
          break;
        case 2 :
          text = '审核不通过';
          break;
        case 3 :
          text = '已发布';
          break;
      }
      return text
    }
    // return
    return {
      getCostTotal,
      total2,
      pageInfo2,
      addMoreFlag,
      getListTwo,
      type,
      farmResourceNameOptionList2,
      categoryChange2,
      reSet,
      getList,
      addFlag,
      farmResourceNameOptionList,
      categoryChange,
      total,
      currentChange,
      currentChange2,
      searchHandle,
      delOne,
      openEdit,
      searchForm2,
      farmResourceOptionList,
      searchForm,
      plotOptionList,
      pageInfo,
      menu,
      activeIndex,
      tableData,
      tableData2,
      value,
      options,
      date,
      addOne,
      addMoreHandle,
      userRole,
      searchOptions,
      getStatus
    };
  },
});
</script>

<style lang="scss">
.setwrap {

  .el-table th.el-table__cell,
  .el-table .el-table__cell,
  .el-table tr,
  .el-table--fit {
    background: transparent !important;
    color: #fff !important;
  }

  .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .el-pagination.is-background .el-pager li {
    background: transparent !important;
    color: #fff !important;
  }

  .el-pagination.is-background .btn-next {
    background: none !important;
  }

  .btn-prev {
    background: none !important;
  }

  .el-input__wrapper {
    background: rgba(255, 255, 255, 0.08) !important;
    width: 200px;
    border-radius: 200px;
    border: none !important;
    box-shadow: none;
  }
}
</style>
<style lang="scss" scoped>
@import "@/assets/scss/index.scss";

.setwrap {
  .btn3 {
    width: 100px !important;
    margin-left: 10px;
  }

  .btn7 {
    width: 77px !important;
  }

  .cost {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    font-size: 20px;

    span {
      font-weight: bold;
      font-size: 25px;
      margin-left: 10px;
    }
  }

  .fy {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .total {
      color: rgba(255, 255, 255, 0.6);
      font-size: 10px;

      span {
        font-size: 20px;
      }
    }
  }

  .table {
    margin-top: 20px;
  }

  .btnwrap {
    display: flex;
    align-items: center;

    .btntext {
      color: rgba(49, 127, 245, 1);
      cursor: pointer;
    }

    .delete {
      color: rgba(245, 98, 98, 1) !important;
    }
  }

  .titlecommon2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .btn2 {
    width: 70px;
    box-sizing: border-box;
    padding: 5px 10px !important;
    margin-top: 20px;
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(9, 127, 229, 1);
    font-size: 14px;
    padding: 5px 20px;
    border-radius: 5px;
    cursor: pointer;
  }
  .btn-success {
    background: #67C23A;
  }
  .btn-delete {
    background: #F56C6C;
  }
  .success{
    color:#67C23A
  }
}
</style>
